Skip to main content link. Accesskey S
  • Help
  • HCL Logo
  • HCL Notes and Domino Application Development wiki
  • THIS WIKI IS READ-ONLY. Individual names altered for privacy purposes.
  • HCL Forums and Blogs
  • Home
  • Product Documentation
  • Community Articles
  • Learning Center
  • API Documentation
Search
Community Articles > 日本語 - Japanese > XPagesとjQueryMoileでモバイル用メニュー紹介アプリを作ってみよう
  • Share Show Menu▼
  • Subscribe Show Menu▼

Recent articles by this author

jQueryMobile1.3のPanelウィジェットを使ってビュー用XPagesを切り替える(ナビゲータの代わりを作る)

jQueryMobile1.3で追加されたPanelウィジェットを使って、XPagesを切り替えるメニューを作ります。 ビューを切り替えるナビゲータのようにも使えます。

XPagesとjQueryMoileでモバイル用メニュー紹介アプリを作ってみよう

jQueryMobileを使って、カテゴリを階層表示し、添付ファイル画像をリストビューに表示するモバイルアプリケーションの作り方です。 この方法のメリットは1画面につき1XPagesなのでデバッグが容易な点と、カテゴリの絞り込

jQueryのaccordionを使ってナビゲータを作る➀(固定ナビゲータ)

jQueryのaccordionを使って折りたたみできるナビゲータを作ります。
Community articleXPagesとjQueryMoileでモバイル用メニュー紹介アプリを作ってみよう
Added by ~Rebecca Umkipuljip | Edited by ~Rebecca Umkipuljip on May 21, 2013 | Version 15
  • Actions Show Menu▼
expanded Abstract
collapsed Abstract
jQueryMobileを使って、カテゴリを階層表示し、添付ファイル画像をリストビューに表示するモバイルアプリケーションの作り方です。 この方法のメリットは1画面につき1XPagesなのでデバッグが容易な点と、カテゴリの絞り込みにURL引数でカテゴリフィルタを使っているので、画面単位で作れるため開発生産性が高い点です。
Tags: XPages, javascript, japanese
ShowTable of Contents
HideTable of Contents
  • 1 はじめに(完成形と効果)
  • 2 準備する物
  • 3 作成するXPagesファイルの構成
  • 4 jQueryMobileをNSFファイルに組み込む
  • 5 XPagesにjQueryMobileを組み込む
  • 6 1ページ目:ビューのカテゴリを表示する①
  • 7 2ページ目:ビューのカテゴリを表示する②
  • 8 3ページ目:ビューの文書を表示する
  • 9 4ページ目:フォームを表示する
  • 10 戻るボタンを作る

はじめに(完成形と効果)

ノーツのカテゴリと添付ファイルを表示するモバイルメニュー紹介アプリです。

この方法のメリットは1画面につき1XPagesなのでデバッグが容易な点と、カテゴリの絞り込みにURL引数でカテゴリフィルタを使っているので、画面単位で作れるため開発生産性が高い点です。

準備する物

  • テキストフィールドと画像添付用のリッチテキストフィールド、添付された画像のファイル名を計算する複数値可能フィールドを配置します。

  • ビューは2段階のカテゴリを付けたビューです。

  • データは適当に項目を入力し、画像ファイルを添付しておきます。

 

作成するXPagesファイルの構成

下記の4つのXpagesを作成します。

Xpagesの名前

内容

cate1.xsp

1ページ目

リスト(ビュー)表示。カテゴリ1階層目。

cate2.xsp

2ページ目

リスト(ビュー)表示。カテゴリ2階層目。

cate3.xsp

3ページ目

リスト(ビュー)表示。イメージと文書を表示。

frm.xsp

4ページ目

フォーム表示。

 

 

jQueryMobileをNSFファイルに組み込む

1.jQueryのHPからjQueryとjQueryMobileをダウンロードします。

種類

URL

内容

JavaScriptライブラリ

http://code.jquery.com/jquery-1.9.1.min.js

jQuery本体

一括ダウンロード用

圧縮ファイル

http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.zip

 

jQueryMobile本体

jQueryMobileCSS

画像などリソースファイル

※バージョンが変わっている場合はこちらから

http://jquery.com/download/

http://jquerymobile.com/download/

 

2.ダウンロードしたjquery.mobile-1.3.0.zipを適当なフォルダに解凍します。

 

3.jQueryを組み込みたいノーツアプリケーションを開き、設計要素から「リソース-ファイル」を開きます。

 

4.[ファイルリソースのインポート]ボタンを押し、ダウンロードしたjQuery、jQueryMobileを登録します。

種類

ファイル名

補足

JavaScriptライブラリ

jquery-1.9.1.min.js

 

JavaScriptライブラリ

jquery.mobile-1.3.0.min.js

 

jquery.mobile-1.3.0.zipを解凍したファイル

スタイルシート

jquery.mobile-1.3.0.min.css

jquery.mobile-1.3.0.zipを解凍したファイル

【イメージ】

 

5.jquery.mobile-1.3.0.zipを解凍したフォルダから画像ファイルをイメージリソースに登録します。

標準ではpngファイルが選択できないので、ファイル名に「*.*」と入力し、全てのファイルを表示させます。

取り込んだファイルにはフォルダ名がつかないので、名前の変更を使ってファイル名の前に「images/」というパスを追加します。

フォルダ

ファイル名(ファイルシステム)

インポート後の名前(イメージリソース)

images

ajax-loader.gif

images /ajax-loader.gif

images

icons-18-black.png

images /icons-18-black.png

images

icons-18-white.png

images /icons-18-white.png

images

icons-36-black.png

images /icons-36-black.png

images

icons-36-white.png

images /icons-36-white.png

【イメージ】

 

 

XPagesにjQueryMobileを組み込む

  • 新規Xpagesを作成し、ソースタブにjquery moibileを組み込むためのタグを書き込みます。Xpagesのプロパティ-リソースからファイルを順番に選択しても同様の操作が可能です。

【XPagesソース】

	<xp:this.resources>

	        <xp:script src="/jquery-1.9.1.min.js" clientSide="true"></xp:script>

	        <xp:script src="/jquery.mobile-1.3.0.min.js"

	                clientSide="true">

	        </xp:script>

	        <xp:styleSheet href="/jquery.mobile-1.3.0.min.css"></xp:styleSheet>

	</xp:this.resources>

	

【イメージ】

 

 

1ページ目:ビューのカテゴリを表示する①

1.データリソースとしてカテゴリのビューを登録します。

【イメージ】

 

2.1ページ目はカテゴリのみ表示するため、データソースプロパティの「expandLevel」に“1”を指定します。

【イメージ】

 

3.XpagesのソースにjQueryMobileでヘッダー、コンテンツの基本構文となるタグを入力します。(データソースが指定してあるタグの下)

【XPagesソース】

	<!--ページの設定-->

	<div data-role="page">

	        <!--ヘッダの設定-->

	        <div data-role="header">

	        </div>

	               

	        <!--コンテンツの設定-->

	        <div data-role="content">

	        </div>

	</div>

	

【イメージ】

 

4.テーマカラーを変更したい場合には、<div>タグに「data-theme」を指定します。

【XPagesソース】

	<!--ページの設定-->

	<div data-role="page" data-theme="b">

	

 

5.ヘッダータグに内容を設定します。

【XPagesソース】

	<div data-role="header">

	        <h1>分類</h1>

	</div>

	

 

6.コンテンツの中に<ul>タグを配置し、ListViewを作ります。

【XPagesソース】

	<!--コンテンツの設定-->

	<div data-role="content">

	        <ul data-role="listview">

	                       

	        </ul>

	</div>

	

【イメージ】

 

7.右のコンテナコントロールから繰り返しコントロールをドラッグ&ドロップでListViewタグの下に配置し、繰り返しコントロールの名前(デフォルトはrepeat1を消します。(名前が残っているとjquery mobileのスタイルが反映されません。)

【XPagesソース】

	<!--コンテンツの設定-->

	<div data-role="content>

	        <ul data-role="listview">

	                <xp:repeat rows="30" value="#{view1}">

	 

	</xp:repeat>

	        </ul>

	</div>

	

 

8.ページ替えをさせないため、オプションの繰り返し頻度には大きな値を入れ(例では9999)、コレクション名に「dataRow」と設定します。

【イメージ】

 

9.<li>タグを入れます。

【XPagesソース】

	<ul data-role="listview">

	        <xp:repeat rows="9999" value="#{view1}">

	                <li>

	                                               

	                </li>

	</xp:repeat>

	</ul>

	

 

9.右のコアコントロールからリンクコントロールをドラッグ&ドロップで<li>タグの下に配置し、ラベルを消します。

【XPagesソース】

	<xp:repeat value="#{view1}" var="dataRow" rows="9999">

	       <li>

	              <xp:link escape="true" id="link1">

	 

	</xp:link>

	       </li>

	</xp:repeat>

	

 

10.右のコアコントロールから計算結果フィールドをドラッグ&ドロップでリンクコントロールの下に配置します。

【XPagesソース】

	<li>

	       <xp:link escape="true" id="link1">

	              <xp:text escape="true"

	                     id="computedField1">

	              </xp:text>

	       </xp:link>

	</li>

	

 

11.リンクコントロールを選択し、オプション-リンクタイプ-URLの横にある◇をクリックし、2ページ目のXpagesを指定し、URL引数にcategoryFillterを設定します。

【SSJSソース】

"/cate2.xsp?OpenXpage&categoryFilter=" + dataRow.getColumnValues().get(0)

【イメージ】

 

11.計算結果フィールドを選択し、値-使用するバインドデータに「JavaScript」を選択し、カテゴリがある場合のみ値を表示する式を書き込みます。

【SSJSソース】

dataRow.isCategory() ? dataRow.getColumnValues().get(0) : null

【イメージ】

 

12.スマートフォンの画面にあわせるため、サイズをデバイスの幅に指定するHTMLをXPagesソースに書き込みます。(データソース指定の下あたり)

【XPagesソース】

	<!-- サイズをデバイスの幅に設定、倍率を固定-->

	<meta name="viewport" content="width=device-width, initial-scale=1" />

	

【イメージ】

 

 

2ページ目:ビューのカテゴリを表示する②

1.1ページ目(cate1.xsp)をコピーし、2ページ目(cate2.xsp)にリネームします。

 

2.2ページ目のXPagesを開き、ソースタブでヘッダーの内容を変更します。

【XPagesソース】

	<div data-role="header">

	        <h1>種別</h1>

	</div>

	

 

2.リンクコントロールを選択し、オプション-リンクタイプ-URLの横にある◇をクリックし、3ページ目のXpagesを指定し、URL引数にcategoryFillterを設定します。(URL引数から1階層目、クリックした列から2階層目を取得)

【SSJSソース】

	"/cate3.xsp?OpenXpage&categoryFilter=" + param.get("categoryFilter") + "\\" + dataRow.getColumnValues().get(1)

	

【イメージ】

 

3.計算結果フィールドを選択し、値-使用するバインドデータに「JavaScript」を選択し、カテゴリがある場合のみ値を表示する式を書き込みます。(2列目を取得)

【SSJSソース】

	dataRow.isCategory() ? dataRow.getColumnValues().get(1) : null

	

【イメージ】

 

 

3ページ目:ビューの文書を表示する

1.1ページ目(cate1.xsp)をコピーし、3ページ目(cate3.xsp)にリネームします。

 

2.3ページ目のXPagesを開き、ソースタブでヘッダーの内容を変更します。

【XPagesソース】

	<div data-role="header">

	        <h1>メニュー</h1>

	</div>

	

 

3.リンクコントロールを選択し、オプション-リンクタイプ-URLの横にある◇をクリックし、4ページ目のXpagesを指定し、URL引数にdocumentIdを設定します。

【SSJSソース】

	"/frm.xsp?OpenXpage&documentId="+dataRow.getDocument().getUniversalID();

	

【イメージ】

 

4.リンクコントロールを選択し、オプション-リンクイメージを追加にチェックを付け、イメージの横にある◇をクリックし、添付ファイル画像を表示する式を書き込みます。(表示される添付ファイルは一つ目)

【SSJSソース】

	"/"+dataRow.getDocument().getUniversalID()+"/$File/"+@Subset(dataRow.getDocument().getItemValue("ImageFileNameList"),1)

	

【イメージ】

 

4.計算結果フィールドを選択し、値で単純データバインディングを選択肢、データソース「dataRow」、バインド先「Subject(件名)」を選択します。(dataRowは繰り返しコントロールのコレクション名)

【XPagesソース】

	<!-- 品名 -->

	<xp:text escape="true" id="computedField1"

	        value="#{dataRow.Subject}">

	</xp:text>

	

【イメージ】

 

5.右のコアコントロールから計算結果フィールドをドラッグ&ドロップで品名用の計算結果フィールドの下に配置し、単純データバインディングでデータソース「dataRow」、バインド先「Price(金額)」を選択します。

【XPagesソース】

	<!-- 金額 -->

	<xp:text escape="true" id="computedField2"

	        value="#{dataRow.Price}">

	</xp:text>

	

 

6.体裁を整えるために、品名用の計算結果フィールドを<h1>タグで囲い、金額用の計算結果フィールドを<p>タグで囲います。

【XPagesソース】

	<!-- 品名 -->

	<h1>

	<xp:text escape="true" id="computedField1"

	                value="#{dataRow.Subject}">

	        </xp:text>

	</h1>

	<!-- 金額 -->

	<p>

	        <xp:text escape="true" id="computedField2"

	                value="#{dataRow.Price}">

	        </xp:text>

	</p>

	

 

7.必要に応じて、計算結果フィールドの値の表示タイプやスタイルを変更して下さい。

 

 

4ページ目:フォームを表示する

1.1ページ目(cate1.xsp)をコピーし、4ページ目(frm.xsp)にリネームします。

 

2.4ページ目のXPagesを開き、データソースを選択、Dominoビューのデータソースを削除し、Domino文書のデータソースを追加。フォームを選択し、デフォルトアクションには「文書を開く」を選択します。

【イメージ】

 

3.ソースタブでヘッダーの内容を変更します。

【XPagesソース】

	<div data-role="header">

	        <h1>詳細</h1>

	</div>

	

 

4.繰り返しコントロールと、その中に挟まれたXPagesソースを削除します。

 

5.Listviewの中に<li>タグを配置し、計算結果フィールドで「Subject(品名)」と「Price(金額)」を表示します。

【XPagesソース】

	<ul data-role="listview">

	        <li>

	                <!-- 品名 -->

	                <h1>

	                        <xp:text escape="true" id="computedField1"

	                                value="#{document1.Subject}">

	                        </xp:text>

	                </h1>

	                <!-- 金額 -->

	                <p>

	                価格:

	                <xp:text escape="true" id="computedField2"

	                        value="#{document1.Price}">

	                </xp:text>

	                </p>

	        </li>

	</ul>

	

 

6.Listviewの下に繰り返しコントロールを配置します。(複数の添付ファイル画像を表示するため)

 

7.繰り返しコントロールを選択し、名前を削除、単純データバインディングで添付ファイル名の入っているフィールドを選択する。コレクション名には「filelist」と入力します。

【Xpagesソース】

	<xp:repeat rows="30" value="#{document1.ImageFileNameList}"

	        var="filelist">

	</xp:repeat>

	

【イメージ】

 

8.繰り返しコントロールのタグ内にイメージコントロールを配置し、イメージリソースに添付ファイルを読み込むコードを書き込みます。(一番後ろの「filelist」は繰り返しコントロールのコレクション名)

【SSJSソース】

	"/"+document1.getDocument().getUniversalID()+"/$File/"+filelist

	

【イメージ】

 

 

戻るボタンを作る

  • ヘッダー部分に戻るボタンを追加するには、2ページ目以降のpageコントロールを下記のように書き換えます。

【Xpagesソース】

	<div data-role="page" data-add-back-btn="true" data-theme="b">

	       <!--ヘッダの設定-->

	       <div data-role="header">

	              <a href="" data-rel="back">戻る</a>

	              <h1>種別</h1>

	       </div>

	

 


  • Actions Show Menu▼


expanded Attachments (0)
collapsed Attachments (0)
Edit the article to add or modify attachments.
expanded Versions (15)
collapsed Versions (15)
Version Comparison     
VersionDateChanged by              Summary of changes
This version (15)May 21, 2013, 11:03:18 AM~Rebecca Umkipuljip  
14May 21, 2013, 11:02:36 AM~Miriam Quettoomannivu  
13May 21, 2013, 11:01:51 AM~Miriam Quettoomannivu  
12May 21, 2013, 2:23:30 AM~Miriam Quettoomannivu  
11May 20, 2013, 10:55:20 AM~Miriam Quettoomannivu  
10May 20, 2013, 10:49:57 AM~Miriam Quettoomannivu  
9May 16, 2013, 3:21:15 PM~Miriam Quettoomannivu  
8May 16, 2013, 3:19:19 PM~Miriam Quettoomannivu  
7May 16, 2013, 12:14:22 PM~Miriam Quettoomannivu  
6May 16, 2013, 12:10:27 PM~Miriam Quettoomannivu  
5May 16, 2013, 12:06:41 PM~Miriam Quettoomannivu  
4May 16, 2013, 11:54:44 AM~Miriam Quettoomannivu  
3May 16, 2013, 11:53:00 AM~Miriam Quettoomannivu  
2May 16, 2013, 11:47:02 AM~Miriam Quettoomannivu  
1May 16, 2013, 11:42:22 AM~Miriam Quettoomannivu  
expanded Comments (0)
collapsed Comments (0)
Copy and paste this wiki markup to link to this article from another article in this wiki.
Go ElsewhereStay ConnectedAbout
  • HCL Software
  • HCL Digital Solutions community
  • HCL Software support
  • BlogsDigital Solutions blog
  • Community LinkHCL Software forums and blogs
  • About HCL
  • Privacy
  • Accessibility